<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <image class="main-banner" :src="goodInfo.pic" mode="widthFix" />
      <view class="point-section">
        <text>{{ goodInfo.integral }}</text>
        <text>/{{ $t('shop.integral') }}</text>
      </view>
      <view class="integral-info">
        <view class="title">{{ goodInfo.name }}</view>
        <view>{{ $t('integral.hasChange') }} {{ goodInfo.sales }}</view>
      </view>
      <view class="integral-explain">
        <view class="explain-title">{{ $t('integral.rights') }}</view>
        <rich-text :nodes="goodInfo.detail"></rich-text>
      </view>
      <view class="content-foot">
        <view class="confirm-btn" @click="handleExchange">{{
          $t('integral.change')
        }}</view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      goodInfo: {},
      integral: 0,
    };
  },
  computed: {},
  onLoad(t) {
    if (t?.id) {
      this.getIntegralDetail({ id: t.id });
      this.integral = t.integral;
    }
  },
  methods: {
    //  api获取积分商品详情
    getIntegralDetail(params) {
      uni.showLoading({
        title: this.$t('facePay.requesting'),
      });
      this.$allrequest.integral.getIntegralDetail(params).then(res => {
        uni.hideLoading();
        if (!res.code && res.data) {
          this.goodInfo = res.data;
        }
      });
    },
    // 点击兑换按钮
    handleExchange() {
      if (this.integral < this.goodInfo.integral) {
        this.toastModal(this.$t('integral.cantChange'));
        return;
      }
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      this.$allrequest.integral
        .exchangeGoods({ id: this.goodInfo.id })
        .then(res => {
          uni.hideLoading();
          if (!res.code) {
            this.toastModal(this.$t('integral.success'));
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            this.toastModal(res.msg);
          }
        });
    },
    // toast提示
    toastModal(msg) {
      uni.showToast({
        title: msg,
        icon: 'none',
        duration: 2000,
        mask: true,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  background-color: #f2f2f2;

  .page-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 130rpx;
    .main-banner {
      width: 100%;
      display: block;
    }

    .point-section {
      height: 130rpx;
      background: #ff4b33;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #ffffff;
      text:first-child {
        font-size: 48rpx;
      }
    }

    .integral-info {
      padding: 39rpx 25rpx;
      background: #ffffff;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      .title {
        font-size: 34rpx;
        font-weight: 500;
        color: #191919;
        margin-bottom: 20rpx;
      }
    }

    .integral-explain {
      flex: 1;
      margin-top: 24rpx;
      background: #ffffff;
      padding: 40rpx 25rpx;

      .explain-title {
        font-size: 34rpx;
        font-weight: 500;
        color: #191919;
        line-height: 1;
      }

      .explain-label {
        font-size: 24rpx;
        font-weight: 500;
        color: #191919;
        margin-top: 30rpx;
      }
    }

    .content-foot {
      width: 100%;
      height: 130rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 11;
      background: #ffffff;
      border: 1rpx solid #f2f2f2;
      padding: 20rpx 24rpx;
      .confirm-btn {
        width: 702rpx;
        height: 90rpx;
        background: #f4dfac;
        border-radius: 45rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #191919;
        line-height: 90rpx;
        text-align: center;
      }
    }
  }
}
</style>
